<template>
  <el-card>
    <el-button type="primary" @click="$router.push('/layout/add')" icon="el-icon-circle-plus-outline"
      >添加</el-button
    >
    <el-divider />
    <el-table
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border

      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="ID"  min-width="80">
      </el-table-column>
      <el-table-column prop="title" label="姓名"  min-width="180">
      </el-table-column>
      <el-table-column prop="icon" label="图标"  min-width="180"> 
        <!-- 作用域插槽 -->
        <template v-slot="scope">
            <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="地址"  min-width="180" size="mini"> </el-table-column>
      <el-table-column prop="status" label="状态"  min-width="180" size="mini"> 
        <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column  label="操作"  min-width="180"> 
        <!-- 知道修改和删除为什么一定要在定义路由参数的时候定义动态路由了吗？
        是为了在修改和删除按钮加一个v-slot作用域插槽，用以绑定动态的id，在逻辑层也要用到 -->
       <template v-slot="scope">
          <el-button type="success"  @click="edit(scope.row.id)"  size="mini" circle icon="el-icon-edit"></el-button>
          <el-button type="danger" @click="del(scope.row.id)" size="mini" circle icon="el-icon-delete"></el-button>
       </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { getMenuList} from '../../request/menu'
export default {
  data() {
    return {
      // 菜单数据
      list: [],
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 31,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableData1: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          hasChildren: true,
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  // 生命周期函数
  created() {
    this.getMenList();
  },
  methods: {
    del(id){
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      // this.$confirm(()=>{  //这里不用箭头函数，this的指向会出问题，会无法删除
      // // 这个组件，如果一级目录下有子列表，那么就无法删除
      //     this.$http.post('/api/menudelete',{id}).then(res=>{
      //         if(res.code==200){
      //           // 更新视图，根据id索引删除
      //           const index=this.list.findIndex(item=>item.id===id);
      //           this.list.splice(index,1)
      //           this.$success('删除成功')
      //         }else{
      //           this.$error('删除失败')
      //         }
      //         // 在数据库删除之后，再调用一次数据，实现更新
      //         this.getMenList()
      //     })
      // })
    },
    edit(id){
      this.$router.push( `/layout/Edit/${id}`)
    },
    getMenList() {
      // const userInfo=JSON.parse(sessionStorage.getItem('userinfo'))
      this.$http.get("/api/menulist?istree=1", {
          // headers:{
          //   // 认证授权 是自定 义的
          //   authorization:userInfo.token
          // }
        })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            // 更新数据
            this.list = res.list;
          }
        });
    },
  },
};
</script>

<style>
</style>